<template>
	
    <view class="question-wrapper">
        <!-- 直接展示刷题功能区，去除了页签菜单切换 -->
        <view v-show="true" class="tab-content"> <!-- 刷题 -->
            <view class="practice-section">
                <view class="section-title">刷题模式</view>
                <view class="section-description">进入刷题，提升知识点掌握程度</view>
                <view class="button" @tap="startPractice">开始刷题</view>
            </view>
        </view>

        <!-- 直接展示咨询功能区，去除了页签菜单切换 -->
        <view v-show="true" class="tab-content"> <!-- 咨询 -->
            <view class="consultation-section">
                <view class="section-title">咨询服务</view>
                <view class="section-description">如果有问题，可以联系老师或其他同学</view>
                <view class="button" @tap="startConsultation">开始咨询</view>
            </view>
        </view>

        <!-- 直接展示经验圈功能区，去除了页签菜单切换 -->
<!--        <view v-show="true" class="tab-content"> 
            <view class="experience-section">
                <view class="section-title">经验圈</view>
                <view class="section-description">这里将是经验分享的地方，敬请期待!</view>
            </view>
        </view> -->

        <!-- <!-- 底部导航栏，固定在页面下方且有选中效果 -->
<!--        <view class="fixed-footer-nav">
            <view
                class="nav-item"
                :class="{ 'nav-item-active': currentNav === 'home' }"
                @tap="goToHome"
            >
                <view class="nav-text">主页</view>
            </view>
            <view
                class="nav-item"
                :class="{ 'nav-item-active': currentNav === 'experience' }"
                @tap="goToExperience"
            >
                <view class="nav-text">经验圈</view>
            </view>
            <view
                class="nav-item"
                :class="{ 'nav-item-active': currentNav === 'profile' }"
                @tap="goToProfile"
            >
                <view class="nav-text">个人主页</view>
            </view>
        </view> -->
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 当前选中的底部导航栏项目
            currentNav: 'home',
            // 相关资讯数据
            newsList: [
                { title: '最新教育政策解读', image: '/assets/news1.jpg' },
                { title: '2024年高考动态', image: '/assets/news2.jpg' },
                { title: '如何高效复习？', image: '/assets/news3.jpg' },
                { title: '教育行业的未来趋势', image: '/assets/news4.jpg' }
            ]
        };
    },
    methods: {
        // 开始刷题
        startPractice() {
            uni.navigateTo({
                url: '/pages/category/index' // 跳转到刷题页面
            });
        },
        // 开始咨询
        startConsultation() {
            uni.navigateTo({
                url: '/pages/consultation/index' // 跳转到咨询页面
            });
        },
        // 跳转到主页
        goToHome() {
            this.currentNav = 'home';
        },
        // 跳转到经验圈
        goToExperience() {
            // this.currentNav = 'experience';
			this.currentNav = 'experience';
			// uni.navigateTo({
			// 	url:'/pages/experience/experience'//跳转至经验圈
			// })
        },
        // 跳转到个人主页
        goToProfile() {
            // uni.navigateTo({
            //     url: '/pages/index/index' // 跳转到个人主页
            // });
			this.currentNav = 'profile';
        }
    }
}
</script>

<style>
.question-wrapper {
    background: linear-gradient(135deg, rgba(170, 207, 252, 1) 0%, rgba(187, 208, 251, 1) 50%, rgba(178, 236, 248, 1) 100%);
    padding-bottom: 50rpx;
    /* 使内容区域可滚动，避免被底部导航栏遮挡 */
    height: calc(100vh - 60rpx);
    overflow-y: auto;
}

.tab-content {
    padding: 30rpx;
}

.practice-section,
.consultation-section,
.experience-section {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
}

.section-title {
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
}

.section-description {
    font-size: 28rpx;
    color: #666666;
    margin-top: 10rpx;
}

.button {
    margin-top: 20rpx;
    padding: 20rpx;
    background-color: #5e59ff;
    border-radius: 10rpx;
    color: white;
    font-size: 32rpx;
    text-align: center;
    cursor: pointer;
}

/* 底部导航栏样式 */
.fixed-footer-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #ffffff;
    border-top: 2rpx solid #eeeeee;
    padding: 10rpx 0;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.nav-item {
    flex: 1;
    text-align: center;
    padding: 10rpx;
    cursor: pointer;
}

.nav-text {
    font-size: 30rpx;
    color: #333333;
}

/* 导航栏选中效果样式 */
.nav-item-active {
    color: #5e59ff;
    font-weight: bold;
}

.nav-item:hover {
    color: #5e59ff; /* 悬停效果 */
}
</style>